<template>
  <div class="loginview">
    <div class="left">
      <img src="../assets/loginimg1.jpg" alt="">
    </div>
    <div class="center">
      <div class="home">
        <img alt="logo" src="../assets/image.png">
        <login msg="您的餐厅预定管家" />
      </div>
      <div class="login">
        <div>
          <div class="name">用户名</div>
          <input type="text">
        </div>
        <div>
          <div class="psd">密码</div>
          <input type="password">
        </div>
        <div>
          <div class="forget">忘记密码？</div>
        </div>
        <div>
          <router-link to="/about" class="router"><button class="loginto">登录</button></router-link>
        </div>
        <div>
          <span class="state">
            登录即表示您确认已阅读并接受本网站的
            <a href="" style="color:rgb(248, 179, 51) ; text-decoration: none">使用条款</a>
            和
            <a href="" style="color:rgb(248, 179, 51) ; text-decoration: none">隐私政策</a>
          </span>
        </div>
        <div></div>
        <div>
          <div class="sign">
            还没有账号？
            <a href="" style="color:rgb(248, 179, 51) ; text-decoration: none">创建新账户</a>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <img src="../assets/loginimg2.jpg" alt="">
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import login from '../components/login.vue'
export default {
  name: 'HomeView',
  components: {
    login
  }
}
</script>

<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.loginview{
  height: 100%;
  display: flex;
  justify-content: space-between;
}

//设置图片样式
.loginview>.left{
  width: 600px;
}
.loginview>.left>img{
  height: 1080PX;
  width: 100%;
}
.loginview>.right{
  width: 600px;
}
.loginview>.right>img{
  height: 1080PX;
  width: 100%;
}


.loginview>.center {
  width: auto;
  // margin: auto;
}
.loginview>.center>.home {
  margin-top: 100px;
}

//登录部分中每块的宽度
.loginview>.center>.login>div {
  width: 452px;
  margin: auto;
}

//登录部分中每个输入框的样式
.loginview>.center>.login>div>input {
  display: inline-block;
  width: 444px;
  height: 48px;
  border-radius: 15px;
}

//登录部分中所有文字部分的样式(后续不同可修改)
.loginview>.center>.login>div>div {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: rgba(58, 67, 84, 0.9);
  margin-bottom: 4px;
}

.loginview>.center>.login>div>.psd {
  margin-top: 40px;
}

//忘记密码
.loginview>.center>.login>div>.forget {
  margin-top: 40px;
  margin-bottom: 40px;
  color: rgb(248, 179, 51);
}

//登录按钮
.loginview>.center>.login>div>.router>.loginto {
  display: inline-block;
  width: 452px;
  height: 54px;
  border-radius: 15px;
  color: white;
  background-color: rgb(248, 179, 51);
  font-size: 18px;
  font-weight: 600;
}

//条款
.loginview>.center>.login>div>.state {
  margin-top: 8px;
  margin-left: 2px;
  font-size: 12px;
  color: rgba(58, 67, 84, 0.7);
  float: left;
}

//清除浮动
.loginview>.center>.login>div::after {
  display: block;
  content: '';
  clear: both;
}

//分割线
.loginview>.center>.login>div:nth-child(6) {
  border-bottom: 1px solid rgb(240, 242, 245);
  margin-top: 20px;
  margin-bottom: 10px;
}

//注册账号
.loginview>.center>.login>div>.sign {
  color: rgba(58, 67, 84, 0.7);
  font-size: 14px;
  font-weight: normal;
}
</style>


